<template>
	<SetCard>
		<template #title>
			<p class="font-bold text-20px text-#000000">
				安全设置
			</p>
		</template>
		<template #default>
			<div>
				<div v-for="(item, index) in settings" :key="index"
					class="flex items-center justify-between pt-20px pb-20px border-b-1px border-#E5E6EB border-solid">
					<div class="flex items-center">
						<img :src="item.icon" class="w-40px h-40px" />
						<div class="ml-16px">
							<p class="text-16px text-#000000 mb-6px">{{ item.title }}</p>
							<p class="text-14px text-#B5B5B5">{{ item.desc }}</p>
						</div>
					</div>
					<div class="flex items-center">
						<div class="text-14px flex items-center mr-20px" v-if="item.id === 'set-email'">
							<p class="mr-20px">{{ emailAddress }}</p>
							<p class="text-#114CEE">更换邮箱</p>
						</div>
						<el-button color="#E5E6EB"
							style="color:#000000;width:80px;height:40px;font-size: 14px;border-radius:10px;"
							@click="handleClick(item)">修改
						</el-button>
					</div>
				</div>
			</div>
		</template>
	</SetCard>
	<SecurityVerification :is-show="securityVerificationShow" @confirm="confirmSecurityVerification"
		@close="closeSecurityVerification" :setMethods="securityVerificationMethods"></SecurityVerification>
	<ModifyPassword :is-show="modifyPasswordShow" @close="closeModifyPassword" @confirm="confirmModifyPassword">
	</ModifyPassword>
	<BindPhone :is-show="bindPhoneShow" @close="closeBindPhone" @confirm="confirmBindPhone"></BindPhone>
	<BindMail :is-show="bindEmailShow" @close="closeBindEmail" @confirm="confirmBindEmail"></BindMail>
	<AssociationVerification :is-show="associationVerificationShow"
	@close="closeAssociationVerification"
	@confirm="confirmAssociationVerification"></AssociationVerification>
	<PaymentPassword :is-show="paymentPasswordShow"
	@close="closePaymentPassword" 
	@confirm="confirmPaymentPassword"></PaymentPassword>
</template>
<script lang="ts" setup>
import SetCard from './SetCard.vue';
import SecurityVerification from '../pop/SecurityVerification.vue';
import ModifyPassword from '../pop/ModifyPassword.vue';
import BindPhone from '../pop/BindPhone.vue';
import BindMail from '../pop/BindMail.vue';
import AssociationVerification from '../pop/AssociationVerification.vue';
import PaymentPassword from '../pop/PaymentPassword.vue';
const emailAddress = ref<string>('231****@qq.com');

// 安全验证弹窗
const securityVerificationShow = ref<boolean>(false);
const securityVerificationMethods = ref<string>('');
const closeSecurityVerification = (val: any) => {
	securityVerificationShow.value = val;
};

const confirmSecurityVerification = (id: string) => {
	securityVerificationShow.value = false;
	switch (id) {
		case 'login-password':
			modifyPasswordShow.value = true;
			break;
		case 'set-phone':
			bindPhoneShow.value = true;
			break;
		case 'set-email':
			bindEmailShow.value = true;
			break;
		case 'set-google':
			associationVerificationShow.value = true;
			break;
		case 'pay-password':
			paymentPasswordShow.value = true;
			break;
		default:
			break;
	}
};

// 修改密码弹窗
const modifyPasswordShow = ref<boolean>(false);
const closeModifyPassword = (val: any) => {
	modifyPasswordShow.value = val;
};
const confirmModifyPassword = () => {
	modifyPasswordShow.value = false;
};

// 修改手机绑定
const bindPhoneShow = ref<boolean>(false);

const closeBindPhone = (val: any) => {
	bindPhoneShow.value = val;
};

const confirmBindPhone = () => {
	bindPhoneShow.value = false;
};

// 修改邮箱
const bindEmailShow = ref<boolean>(false);
const closeBindEmail = (val: any) => {
	bindEmailShow.value = val;
};
const confirmBindEmail = () => {
	bindEmailShow.value = false;
};

// 绑定身份验证
const associationVerificationShow = ref<boolean>(false);
const closeAssociationVerification = (val: any) => {
	associationVerificationShow.value = val;
};
const confirmAssociationVerification = () => {
	associationVerificationShow.value = false;
};

// 绑定支付验证
const paymentPasswordShow = ref<boolean>(false);

const closePaymentPassword = (val: any) => {
	paymentPasswordShow.value = val;
};

const confirmPaymentPassword = () => {
	paymentPasswordShow.value = false;
};

const settings = ref<any[]>([
	{
		id: 'login-password',
		icon: '/person/set-password.svg',
		title: '登录密码',
		desc: '修改登录密码',
	},
	{
		id: 'set-phone',
		icon: '/person/set-phone.svg',
		title: '手机验证',
		desc: '用于登录、提币、找回密码、修改安全设置、管理API时进行安全验证'
	},
	{
		id: 'set-email',
		icon: '/person/set-email.svg',
		title: '邮箱验证',
		desc: '为了您的资产安全，修改邮箱地址后24小时内不能提币'
	},
	{
		id: 'set-google',
		icon: '/person/set-google.svg',
		title: '谷歌验证',
		desc: '用于登录、提币、找回密码、修改安全设置、管理API时进行安全验证'
	},
	{
		id: 'pay-password',
		icon: '/person/set-password.svg',
		title: '支付密码',
		desc: '支付密码是用来交易、提现，建议不要与登录密码一致，由此产生的账户被盗，一概不负责'
	}
])

const handleClick = (item: any) => {
	console.log(item)
	switch (item.id) {
		case 'login-password':
			securityVerificationMethods.value = item.id;
			securityVerificationShow.value = true;
			break;
		case 'set-phone':
			securityVerificationMethods.value = item.id;
			securityVerificationShow.value = true;
			break;
		case 'set-email':
			securityVerificationMethods.value = item.id;
			securityVerificationShow.value = true;
			break;
		case 'set-google':
			securityVerificationMethods.value = item.id;
			securityVerificationShow.value = true;
			break;
		case 'pay-password':
			securityVerificationMethods.value = item.id;
			securityVerificationShow.value = true;
			break;
		default:
			break;
	}
}
</script>
